<template>
  <el-row id="app">
      <el-col :span="24" class="header" >
        <el-col :span="10" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'">
          {{collapsed?'':sysName}}
        </el-col>
        <el-col :span="10">
          <el-menu
            :default-active="activeIndex"
            mode="horizontal"
            @select="handleSelect"
            :router = true
            background-color="#545c64"
            text-color="#CFCDD3"
            active-text-color="#fff">
            <el-menu-item index="1" :route="{path: '/PCM_AutomationViewer/TestCaseTable'}">Control Center</el-menu-item>
            <el-menu-item index="2" :route="{path: '/PCM_AutomationViewer/mock'}">Mock WebService Config</a></el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="4" class="userinfo">
          <el-dropdown trigger="hover">
            <span class="userinfo-inner">{{sysUserName}}</span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item divided @click.native="logout" >Log Out</el-dropdown-item>
              <!--<el-dropdown-item >Set Up</el-dropdown-item>-->
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-col>
    <router-view></router-view>
  </el-row>

</template>
<script>
  /* eslint-disable */

  export default {
    data(){
      return {
        activeIndex: '',
        sysName:'PCM Automation',
        collapsed:false,
        sysUserName:'',
      };
    },
    methods: {
      handleSelect(key, keyPath) {
//        if(key==1){this.$router.push({path:'/home/1'})}
//        if(key==3){this.$router.push({path:'/home/3'})}

      },
      logout: function () {
        var self = this;
        this.$confirm('Confirm exit?', 'Tip', {
          //type: 'warning'
        }).then(function(){
          sessionStorage.removeItem('user');
          self.$store.dispatch('logout');
          self.$router.push('/login');
      }).catch(function() {
        });
      },
      handleActiveIndex: function () {
        if(this.$route.path==='/PCM_AutomationViewer/TestCaseTable'){
          this.activeIndex ='1'
        }
        else if(this.$route.path==='/PCM_AutomationViewer/mock'){
          this.activeIndex='2'
        }
      }
    },
    components : {

    },
    mounted(){
      var user = sessionStorage.getItem('user');
      if (user) {
        user = JSON.parse(user);
        this.sysUserName = user || 'empty';
      }
      this.handleActiveIndex();

    }
  }
</script>
<style>
  body{margin: 0;}
  #app {
    min-width: 1200px;
    margin: 0 auto;
    font-family: "Helvetica Neue","PingFang SC",Arial,sans-serif;
  }
  .logo {

    /*width:230px;*/
    padding-top: 15px;
    color: #ffffff;
    height:60px;
    font-size: 22px;
    padding-left:20px;
    padding-right:20px;
    border-color: rgba(238,241,146,0.3);
    border-right-width: 1px;
    border-right-style: solid;
  }
  .logo.logo-width{
    width:230px;
  }
  .logo.logo-collapse-width{
    width:60px
  }
  .header{
    background-color: #545c64;
  }
  .userinfo {
    text-align: right;
    padding-right: 35px;
    padding-top:20px;
    float: right;
    color: #ff1d00;
  }
  .userinfo-inner {
    cursor: pointer;
    color: #fff;
  }

</style>
